import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View, Text, Button, Video, ScrollView } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane, AtButton, AtMessage } from 'taro-ui'
import SecondBtn from './component/secondBtn/index'
import List from './component/totalList/index'
import IncList from './component/incList/index'
import DecList from './component/decList/index'
import { getTags, getNewToken } from '../../api/index'
import { useStore } from '../../model/index'
import LoginModal from '../../components/login/index'

interface GetTagsResSubArr {
  label: string
  value: number
}
interface GetTagsResArr {
  label: string
  sub: Array<GetTagsResSubArr>
  value: number
}

export default () => {
  const [value, setValue] = useState('')
  const [current, setCurrent] = useState(0)
  const [btnCurrent, setBtnCurrent] = useState(-1)
  const [tagsList, setTagsList] = useState<GetTagsResArr[]>([])
  const [searchVal, setSearchVal] = useState('')
  const [state, actions] = useStore('Index')
  const [openLogin, setOpenLogin] = useState(false)
  const [trigger, setTrigger] = useState(Symbol())

  useEffect(() => {
    ;(async () => {
      const {
        data: { data, errorCode }
      } = await getTags()
      if (errorCode === 0) {
        setTagsList(data.tagsList)
      }
    })()
    return () => {
      ;(async () => {
        await actions.toSaveSearchWord('')
      })()
    }
  }, [])

  const onSearch = async () => {
    if (Taro.getStorageSync('token') && Taro.getStorageSync('id')) {
      await actions.toSaveSearchWord(value)
      await actions.toSaveChoosedBtn({
        firstBtn: -1,
        secondBtn: -1
      })
      setSearchVal(value)
      setBtnCurrent(-1)
    } else {
      setOpenLogin(true)
      setTrigger(Symbol())
    }
  }

  const onClear = async () => {
    await actions.toSaveSearchWord('')
    setValue('')
    setSearchVal('')
  }

  const changeTabs = async (val) => {
    if (Taro.getStorageSync('token') && Taro.getStorageSync('id')) {
      setCurrent(val)
      setBtnCurrent(-1)
    } else {
      openLoginFun()
    }
  }

  const openLoginFun = () => {
    setOpenLogin(true)
    setTrigger(Symbol())
  }

  return (
    <View>
      {Taro.getStorageSync('token') ? (
        ''
      ) : (
        <LoginModal open={openLogin} trigger={trigger}></LoginModal>
      )}
      <AtSearchBar
        value={value}
        onChange={(val) => setValue(val)}
        onActionClick={onSearch}
        onClear={onClear}
      />
      <View className="divLine"></View>
      {!searchVal ? (
        <AtTabs
          className="at-tabs"
          current={current}
          // scroll
          tabList={[
            { title: '粉丝总榜' },
            { title: '涨粉榜' },
            { title: '掉粉榜' }
          ]}
          onClick={(val) => changeTabs(val)}
        >
          <AtTabsPane current={current} index={0}>
            <View>
              <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
                <AtButton
                  type="secondary"
                  className={btnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
                  size="small"
                  onClick={() => setBtnCurrent(-1)}
                >
                  全部
                </AtButton>
                {tagsList?.map((item, index) => {
                  return (
                    <AtButton
                      type="secondary"
                      className={
                        btnCurrent === index ? 'choose-btn' : 'scroll-btn'
                      }
                      size="small"
                      onClick={() => setBtnCurrent(index)}
                    >
                      {item.label}
                    </AtButton>
                  )
                })}
              </ScrollView>

              <SecondBtn
                firstBtnIndex={btnCurrent}
                tagsList={tagsList}
                firstBtnVal={
                  btnCurrent === -1 ? -1 : tagsList[btnCurrent].value
                }
              ></SecondBtn>
              {tagsList.length === 0 ? (
                <Text></Text>
              ) : (
                <List openLoginFun={openLoginFun}></List>
              )}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>

          <AtTabsPane current={current} index={1}>
            <View>
              <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
                <AtButton
                  type="secondary"
                  className={btnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
                  size="small"
                  onClick={() => setBtnCurrent(-1)}
                >
                  全部
                </AtButton>
                {tagsList?.map((item, index) => {
                  return (
                    <AtButton
                      type="secondary"
                      className={
                        btnCurrent === index ? 'choose-btn' : 'scroll-btn'
                      }
                      size="small"
                      onClick={() => setBtnCurrent(index)}
                    >
                      {item.label}
                    </AtButton>
                  )
                })}
              </ScrollView>

              <SecondBtn
                firstBtnIndex={btnCurrent}
                tagsList={tagsList}
                firstBtnVal={
                  btnCurrent === -1 ? -1 : tagsList[btnCurrent].value
                }
              ></SecondBtn>
              {current === 1 ? <IncList></IncList> : <View></View>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>

          <AtTabsPane current={current} index={2}>
            <View>
              <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
                <AtButton
                  type="secondary"
                  className={btnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
                  size="small"
                  onClick={() => setBtnCurrent(-1)}
                >
                  全部
                </AtButton>
                {tagsList?.map((item, index) => {
                  return (
                    <AtButton
                      type="secondary"
                      className={
                        btnCurrent === index ? 'choose-btn' : 'scroll-btn'
                      }
                      size="small"
                      onClick={() => setBtnCurrent(index)}
                    >
                      {item.label}
                    </AtButton>
                  )
                })}
              </ScrollView>

              <SecondBtn
                firstBtnIndex={btnCurrent}
                tagsList={tagsList}
                firstBtnVal={
                  btnCurrent === -1 ? -1 : tagsList[btnCurrent].value
                }
              ></SecondBtn>
              {current === 2 ? <DecList></DecList> : <View></View>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>
        </AtTabs>
      ) : (
        <AtTabs
          className="at-tabs"
          current={0}
          tabList={[{ title: '搜索结果' }]}
          onClick={() => {}}
        >
          <AtTabsPane current={0} index={0}>
            <View className="search-view">
              <ScrollView scrollX scrollWithAnimation className="scroll-wrap">
                <AtButton
                  type="secondary"
                  className={btnCurrent === -1 ? 'choose-btn' : 'scroll-btn'}
                  size="small"
                  onClick={() => setBtnCurrent(-1)}
                >
                  全部
                </AtButton>
                {tagsList?.map((item, index) => {
                  return (
                    <AtButton
                      type="secondary"
                      className={
                        btnCurrent === index ? 'choose-btn' : 'scroll-btn'
                      }
                      size="small"
                      onClick={() => setBtnCurrent(index)}
                    >
                      {item.label}
                    </AtButton>
                  )
                })}
              </ScrollView>

              <SecondBtn
                firstBtnIndex={btnCurrent}
                tagsList={tagsList}
                firstBtnVal={
                  btnCurrent === -1 ? -1 : tagsList[btnCurrent].value
                }
              ></SecondBtn>
              {tagsList.length === 0 ? <Text></Text> : <List></List>}
              {/* <SecondBtn></SecondBtn> */}
            </View>
          </AtTabsPane>
        </AtTabs>
      )}
    </View>
  )
}
